<script setup lang="ts">
// 从路由对象中提取当前路由的 name
import {getCurrentInstance, onMounted, ref, watch} from "vue";
import {useStore} from "vuex";
import {getWebsiteConfig} from "@/api/homeApi.ts";

const {proxy} = getCurrentInstance();
const store = useStore();

const tabbarActionName = ref(store.state.tabbarActionName || 'index');
const dynamicWatch = (params: string[]) => {
  if (params.includes('tabbarActionName')) {
    watch(() => store.state.tabbarActionName, (newTabbarActionName: boolean) => {
      tabbarActionName.value = newTabbarActionName;
    });
  }
};

const goService = () => {
  getWebsiteConfig().then(res => {
    window.location.href = res.data.service_url;
  })
}

onMounted(() => {
  dynamicWatch(['tabbarActionName']);
});
</script>

<template>
    <van-tabbar active-color="#1A7AF4" v-model="tabbarActionName">
      <van-tabbar-item replace to="/" name="index" icon="wap-home">
          <span>{{ $t('tabbar.index') }}</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/product" name="product" icon="chart-trending-o">
        <span>{{ $t('tabbar.product') }}</span>
      </van-tabbar-item>
      <van-tabbar-item name="service" icon="service-o" @click="goService()">
        <span>{{ $t('tabbar.service') }}</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/record" name="record" icon="records">
        <span>{{ $t('tabbar.record') }}</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/mine" name="mine" icon="contact">
        <span>{{ $t('tabbar.mine') }}</span>
      </van-tabbar-item>
    </van-tabbar>
</template>

<style lang="less" scoped>

</style>